<script setup lang="ts">
	import {
		ref
	} from 'vue'
	import BlogPost from './BlogPost.vue'

	const { foo = 'hello' } = defineProps<{ foo ?: string }>()

	const posts = ref([{
		id: 1,
		title: 'My journey with Vue'
	},
	{
		id: 2,
		title: 'Blogging with Vue'
	},
	{
		id: 3,
		title: 'Why Vue is so fun'
	}
	])
	const postFontSize = ref(1)

	function ensmallText(n) {
		postFontSize.value -= n
	}
</script>

<template>
	<div :style="{fontSize:postFontSize + 'em'}">
		<BlogPost v-for="post in posts" :key="post.id" :title="post.title"
			@enlarge-text="(n) => postFontSize += n" @ensmall-text="ensmallText">
		</BlogPost>

	</div>
</template>